<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools>
        <template #after>
          <el-button type="primary" @click="openDialogOfAddPagePermission">添加权限</el-button>
        </template>
      </PageTools>

      <div ref="tableBox">
        <el-table border :data="list" row-key="id">
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column align="center" label="标识" prop="code"></el-table-column>
          <el-table-column align="center" label="描述" prop="description"></el-table-column>
          <el-table-column align="center" label="操作" #default="{ row }">
            <el-button v-if="row.type === 1" type="text" @click="openDialogOfAddBtnPermission(row)"
              >添加按钮权限</el-button
            >
            <el-button type="text" @click="openDialogOfEdit(row)" :loading="row.loadingOfEdit">编辑</el-button>
            <el-button type="text" @click="onDel(row)" :loading="row.loadingOfDel">删除</el-button>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog :visible.sync="showDialogOfAdd" title="添加权限点">
      <el-form ref="formOfAdd" label-width="120px" :model="formDataOfAdd" :rules="formRulesOfAdd">
        <el-form-item label="权限名称" prop="name">
          <el-input placeholder="请输入" style="width: 80%" v-model="formDataOfAdd.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input placeholder="请输入" style="width: 80%" v-model="formDataOfAdd.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input placeholder="请输入" style="width: 80%" v-model="formDataOfAdd.description"></el-input>
        </el-form-item>
        <el-form-item label="开启状态" prop="enVisible">
          <el-switch v-model="formDataOfAdd.enVisible" active-value="1" inactive-value="2" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onOkOfAdd" :loading="loadingOfAdd">确定</el-button>
          <el-button @click="showDialogOfAdd = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog :visible.sync="showDialogOfEdit" :title="titleOfEdit">
      <el-form ref="formOfEdit" label-width="120px" :model="formDataOfEdit" :rules="formRulesOfEdit">
        <el-form-item label="权限名称" prop="name">
          <el-input placeholder="请输入" style="width: 80%" v-model="formDataOfEdit.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input placeholder="请输入" style="width: 80%" v-model="formDataOfEdit.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input placeholder="请输入" style="width: 80%" v-model="formDataOfEdit.description"></el-input>
        </el-form-item>
        <el-form-item label="开启状态" prop="enVisible">
          <el-switch v-model="formDataOfEdit.enVisible" active-value="1" inactive-value="2" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onOkOfEdit" :loading="loadingOfEdit">确定</el-button>
          <el-button @click="showDialogOfEdit = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionList,
  addPermission,
  delPermission,
  getPermissionDetail,
  updatePermission,
} from '@/api/permission';
import { tranListToTreeDataByGroup } from '@/utils';
export default {
  name: 'Permission',
  data() {
    return {
      // [ 编辑权限点对话框
      loadingOfEdit: false,
      titleOfEdit: '修改权限点',
      showDialogOfEdit: false,
      formDataOfEdit: {
        id: '',
        name: '',
        code: '',
        description: '',
        enVisible: '1',
        type: '1',
        pid: '0',
      },
      formDataOfEditBak: {}, // 数据备份
      formRulesOfEdit: {
        name: [{ required: true, message: '请输入权限名称' }],
        code: [{ required: true, message: '请输入权限标识' }],
      },
      // ] 编辑权限点对话框

      // [ 添加权限点对话框
      loadingOfAdd: false,
      showDialogOfAdd: false,
      formDataOfAdd: {
        name: '',
        code: '',
        description: '',
        enVisible: '1',
        type: '1',
        pid: '0',
      },
      formRulesOfAdd: {
        name: [{ required: true, message: '请输入权限名称' }],
        code: [{ required: true, message: '请输入权限标识' }],
      },
      // ] 添加权限点对话框

      list: [],
    };
  },
  mounted() {
    this.getPermissionList();
  },
  computed: {
    showText() {
      return this.formData.id ? '编辑' : '新增';
    },
  },
  methods: {
    // [ 编辑权限对话框相关方法
    async onOkOfEdit() {
      this.loadingOfEdit = true;
      try {
        await this.$refs.formOfEdit.validate();

        if (JSON.stringify(this.formDataOfEditBak) === JSON.stringify(this.formDataOfEdit)) {
          return this.$message.warning('你没有修改哦~');
        }

        await updatePermission(this.formDataOfEdit);
      } catch (err) {
        return;
      } finally {
        this.loadingOfEdit = false;
      }
      this.showDialogOfEdit = false;
      this.$message.success('修改成功');

      setTimeout(this.$refs.formOfEdit.resetFields, 300);

      this.getPermissionList();
    },
    async openDialogOfEdit(row) {
      row.loadingOfEdit = true;

      try {
        this.formDataOfEdit = await getPermissionDetail(row.id);
        this.formDataOfEditBak = { ...this.formDataOfEdit };
        this.titleOfEdit = `修改权限点-${row.name}`;
        this.showDialogOfEdit = true;
      } finally {
        row.loadingOfEdit = false;
      }
    },
    // ] 编辑权限对话框相关方法

    async onDel(row) {
      await this.$confirm(`你确定要删除"${row.name}"？`, '温馨提示', {
        type: 'warning',
      });

      row.loadingOfDel = true;

      try {
        await delPermission(row.id);
      } catch (err) {
        return;
      } finally {
        row.loadingOfDel = false;
      }

      this.$message.success('删除成功');
      this.getPermissionList();
    },

    // [ 添加权限点对话框
    openDialogOfAddPagePermission() {
      this.formDataOfAdd.type = '1';
      this.formDataOfAdd.pid = '0';
      this.showDialogOfAdd = true;
    },
    openDialogOfAddBtnPermission(row) {
      this.formDataOfAdd.type = '2';
      this.formDataOfAdd.pid = row.id;
      this.showDialogOfAdd = true;
    },
    async onOkOfAdd() {
      this.loadingOfAdd = true;
      try {
        await this.$refs.formOfAdd.validate();
        await addPermission(this.formDataOfAdd);
      } catch (err) {
        return;
      } finally {
        this.loadingOfAdd = false;
      }
      this.showDialogOfAdd = false;
      this.$message.success('添加成功');

      setTimeout(this.$refs.formOfAdd.resetFields, 300);

      this.getPermissionList();
    },
    // ] 添加权限点对话框

    async getPermissionList() {
      const list = await getPermissionList({}, { target: this.$refs.tableBox });

      for (const v of list) {
        v.loadingOfDel = false;
        v.loadingOfEdit = false;
      }

      this.list = tranListToTreeDataByGroup(list, 'pid', '0');
    },
  },
};
</script>
